<template>
  <div>
    <Drawer width="100%" title="查看事件详情" placement="right" v-model:visible="visible" @close="onClose">
      <template #closeIcon>
        <ArrowLeftOutlined />
      </template>
      <Card>
        <Form class="form-wrapper" :model="form" layout="inline" autocomplete="off">
          <FormItem :labelCol="{ span: 12 }" label="事件状态">
            <Select v-model:value="form.eventState" :options="eventStates" placeholder="全部状态" />
          </FormItem>
          <FormItem :labelCol="{ span: 12 }" label="事件级别">
            <Select v-model:value="form.eventLevel" :options="eventLevels" placeholder="全部级别" />
          </FormItem>
          <FormItem :labelCol="{ span: 12 }" label="操作用户">
            <Select v-model:value="form.eventUser" :options="eventUserList" placeholder="全部用户" />
          </FormItem>
          <FormItem :labelCol="{ span: 12 }" label="事件来源">
            <Select v-model:value="form.eventSource" :options="eventSourceList" placeholder="全部来源" />
          </FormItem>
          <FormItem>
            <Tooltip title="查询">
              <Button type="primary" @click="search" shape="circle"
                ><template #icon><SearchOutlined /></template
              ></Button>
            </Tooltip>
            <Tooltip title="重置">
              <Button style="margin-left: 10px" @click="reset" shape="circle"
                ><template #icon><RedoOutlined /></template
              ></Button>
            </Tooltip>
          </FormItem>
        </Form>
      </Card>
      <Card>
        <Table
          class="main-table"
          sticky
          :bordered="true"
          :dataSource="dataSource"
          :columns="detailColumns"
          :pagination="false"
          :loading="loading"
        >
        </Table>
      </Card>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { Button, Card, Tooltip, Table, Drawer, Form, FormItem, Select } from 'ant-design-vue';
import { ArrowLeftOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { getEventDetailListByPage, getEventSourceList, getEventUserList } from '/@/api/maintenance-center/alarm/alarm';
import { detailColumns } from '/@/views/maintenance-center/event-monitoring/data';
const emit = defineEmits(['close']);
const onClose = () => {
  emit('close');
};
const eventUserList = ref([]);
const eventSourceList = ref([]);
const eventStates = ref([
  {
    label: '正常',
    value: 'normal',
  },
  {
    label: '警告',
    value: 'warning',
  },
  {
    label: '故障',
    value: 'incident',
  },
]);
const eventLevels = ref([
  {
    label: '紧急',
    value: 'Critical',
  },
  {
    label: '重要',
    value: 'Major',
  },
  {
    label: '次要',
    value: 'Minor',
  },
  {
    label: '提示',
    value: 'Info',
  },
]);

const form = ref({
  eventState: undefined,
  eventLevel: undefined,
  eventUser: undefined,
  eventSource: undefined,
});

const loading = ref(true);
const dataSource = ref();
const visible = ref<boolean>(false);
let detailParams = {
  eventLevel: form.value.eventLevel,
  eventUser: form.value.eventUser,
  eventState: form.value.eventState,
  eventSource: form.value.eventSource,
  current: 1,
  eventName: '',
  eventType: '',
  from: undefined,
  to: undefined,
  size: 10,
};
let userParams = {
  eventType: '',
  eventName: '',
  from: undefined,
  to: undefined,
  type: 'USER',
};
let sourceParams = {
  eventType: '',
  eventName: '',
  from: undefined,
  to: undefined,
  type: 'EVENT',
};
//获取操作用户列表
const getEventUser = async () => {
  eventUserList.value = await getEventUserList(userParams);
};
//获取事件来源列表
const getEventSource = async () => {
  eventSourceList.value = await getEventSourceList(sourceParams);
};
const getDataSource = async () => {
  try {
    let data = await getEventDetailListByPage(detailParams);
    dataSource.value = data;
  } finally {
    loading.value = false;
  }
};

const openDetail = (record, from, to) => {
  visible.value = true;
  detailParams.eventName = record.eventName;
  detailParams.eventType = record.eventType;
  detailParams.from = from;
  detailParams.to = to;
  userParams.eventName = record.eventName;
  userParams.eventType = record.eventType;
  userParams.from = from;
  userParams.to = to;
  sourceParams.eventName = record.eventName;
  sourceParams.eventType = record.eventType;
  sourceParams.from = from;
  sourceParams.to = to;
  getEventUser();
  getEventSource();
  getDataSource();
};
const closeDetail = () => {
  visible.value = false;
};

const initDetailParam = () => {
  detailParams.eventLevel = form.value.eventLevel;
  detailParams.eventUser = form.value.eventUser;
  detailParams.eventState = form.value.eventState;
  detailParams.eventSource = form.value.eventSource;
  detailParams.current = 1;
  detailParams.size = 10;
};

const reset = () => {
  form.value = {
    eventState: undefined,
    eventLevel: undefined,
    eventUser: undefined,
    eventSource: undefined,
  };
  initDetailParam();
  getDataSource();
};

const search = () => {
  initDetailParam();
  getDataSource();
};
defineExpose({ visible, openDetail, closeDetail });
</script>
